import * as THREE from 'three';

/**
 *  目标：创建一个简单的 Three 场景，包含 场景、相机、物体、渲染器
 */
/**
 *  Three.js 有几个基础的要素
 *  1. 场景 scene
 *  2. 相机 camera （眼睛）
 *  3. 物体对象（Mesh）
 *  4. 渲染器 renderer
 *  
 *  创建一个Three.js的基本流程是
 *  创建 场景，相机, 物体，渲染器，并将渲染器的 canvas 添加到 body 中
 */

// 创建场景
const scene = new THREE.Scene();

// 创建相机 fov（角度）, aspect （宽高比）, near 近裁剪面，far 远裁剪面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(0,0,10)
scene.add(camera);

// 添加物体
// 添加几何体
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
// 添加材质
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 设置位置
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 0;
// 添加到场景中
scene.add(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

// 将 webgl 渲染的 canvas 添加到 body 中
document.body.appendChild(renderer.domElement);

// 设置相机 和 场景 通过渲染器渲染
renderer.render(scene,camera)



